/**
 * 瀑布流布局插件开发
 */
class Waterfull {
  constructor(option) {
    this.el = document.getElementsByClassName(option.el)[0];
    this.oItems = this.el.getElementsByTagName("div");
    this.column = option.column;
    this.gap = option.gap;
    this.itemWidth =
      (this.el.offsetWidth - (this.column - 1) * this.gap) / this.column;
    this.heightArr = [];
    this.init();
  }
  init() {
    this.rander();
  }
  rander() {
    let item = null;
    let minIdx = -1;
    for (let i = 0; i < this.oItems.length; i++) {
      item = this.oItems[i];
      item.style.width = this.itemWidth + "px";
      if (i < this.column) {
        item.style.top = "0px";
        item.style.left = i * (this.itemWidth + this.gap) + "px";
        this.heightArr.push(item.offsetHeight);
      } else {
        minIdx = this.getMinIdx(this.heightArr);
        item.style.left = this.oItems[minIdx].offsetLeft + "px";
        item.style.top = this.heightArr[minIdx] + this.gap + "px";
        this.heightArr[minIdx] += item.offsetHeight + this.gap;
      }
    }
  }
  getMinIdx(arr) {
    return arr.indexOf(Math.min.apply(null, arr));
  }
}
